<template>
  <div class="book-list" :class="isRank ? 'book-rank' : ''">
    <ul v-if="books.length">
      <li class="b-item" :class="[isRank ? `rank-${index + 1}` : '']" v-for="(item, index) in books" :key="item.id">
        <template v-if="!isRank">
          <div class="cover">
            <a href="javascript:;" @click="goToDetail(item)">
              <t-img :src="bindIMG(item.book ? item.book.filename : '')" alt="" customClass="img" />
            </a>
          </div>
          <div class="info">
            <h4 class="title">
              <a href="javascript:;" @click="goToDetail(item)">{{ item.name }}</a>
            </h4>
            <div class="author">{{ item.author }}</div>
            <div class="description">{{ item.description }}</div>
            <div class="tags" v-if="item.lxInfo">
              <span>{{ item.lxInfo.name }}</span>
            </div>
          </div>
          <div class="btns">
            <a href="javascript:;" @click="handleAddCart(item)">添加购物车</a>
          </div>
        </template>
        <template v-else>
          <div class="other-item" @click="goToDetail(item)">
            <span>{{ index + 1 }}</span>
            <span class="name">{{ item.name }}</span>
            <span>{{ item.author }}</span>
          </div>
        </template>
      </li>
    </ul>
    <div class="not-found" v-else>
      {{ isRank ? "排行榜为空" : "暂无图书信息" }}
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
import { bindIMG } from '@utils';
export default {
  props: {
    data: Array,
    nav: String,
    isRank: Boolean
  },
  data () {
    return {};
  },
  methods: {
    bindIMG,
    ...mapMutations(['setCurrentBook']),
    ...mapActions(['fetchMyCart']),
    goToDetail (book) {
      this.setCurrentBook(book);
      this.$router.push({ name: 'bookDetail', params: { id: book.id } });
      this.$emit('close')
    },
    async handleAddCart (item) {
      const { success } = await this.$api.addShoppingCar({
        createTime: Date.now(),
        goodsId: item.id,
        type: 0,
        updateTime: Date.now(),
        userId: this.currentUser.id
      });
      this.$notify({
        title: '购物车',
        type: success ? 'success' : 'danger',
        message: success ? '添加成功! ' : '添加失败! '
      });
      success && this.fetchMyCart();
    }
  },
  computed: {
    ...mapState(['currentUser']),
    ...mapGetters(['getFileById', 'getCategoryById']),
    books () {
      const res = this.data.filter((item) => {
        item.book = this.getFileById(item.id);
        item.lxInfo = this.getCategoryById(item.id);
        return item;
      });
      if (this.nav === '') {
        return res;
      } else {
        return res && res.filter((item) => item.lx === this.nav);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.book-list {
  background-color: #fff;
  min-height: 400px;

  ul {
    display: flex;
    flex-wrap: wrap;
  }

  &.book-rank {
    padding: 20px;
    border: 1px dashed #8395a7;
    border-radius: 4px;
  }
}

.b-item {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  // background-color: #e0e0e0;
  display: flex;

  &[class*="rank-"] {
    width: 100%;
    padding: 0;
  }

  // &.rank-1,
  // &.rank-2,
  // &.rank-3 {
  //   justify-content: center;
  //   width: 50%;
  //   padding: 20px;

  //   .img-wrapper {
  //     position: relative;

  //     &::before {
  //       position: absolute;
  //       z-index: 11;
  //       font-size: 12px;
  //       width: 100%;
  //       color: white;
  //       text-align: center;
  //       height: 20px;
  //       left: 50%;
  //       bottom: 0;
  //       transform: translateX(-50%);
  //     }
  //   }
  // }

  // &.rank-1 {
  //   width: 100%;
  //   justify-content: center;

  //   .img-wrapper::before {
  //     content: "1";
  //     background-color: #eba613;
  //   }
  // }

  // &.rank-2 {
  //   .img-wrapper::before {
  //     content: "2";
  //     background-color: #00965e;
  //   }
  // }

  // &.rank-3 {
  //   .img-wrapper::before {
  //     content: "3";
  //     background-color: #04bde7;
  //   }
  // }

  ::v-deep .cover {
    margin-right: 10px;

    a {
      position: relative;
      display: block;
      background-color: #666;
      box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);

      .img {
        display: block;
        width: 110px;
      }

      &:hover {
        &::after {
          opacity: 0.2;
        }
      }

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #000;
        content: "";
        opacity: 0;
        transition: opacity 0.2s ease-in;
      }
    }
  }

  .title {
    font-size: 20px;
  }

  .description {
    position: relative;
    font-size: 14px;
    padding: 4px 15px;
    margin: 10px 0;
    line-height: 1.5;
    display: -webkit-box;
    /*弹性伸缩盒子模型*/
    -webkit-box-orient: vertical;
    /*伸缩盒子子排列方式*/
    -webkit-line-clamp: 3;
    /*设置显示文本行数*/
    text-overflow: ellipsis;
    overflow: hidden;

    // &::before,
    // &::after {
    //   position: absolute;
    //   content: "";
    //   width: 8px;
    //   height: 12px;
    // }

    // &::before {
    //   top: 0;
    //   left: 0;
    //   border-left: 1px solid #333;
    //   border-top: 1px solid #333;
    // }

    // &::after {
    //   bottom: 0;
    //   right: 0;
    //   border-right: 1px solid #333;
    //   border-bottom: 1px solid #333;
    // }
  }

  .author {
    margin-top: 4px;
    font-size: 12px;
    color: #777;
  }

  .tags {
    span {
      display: inline-block;
      padding: 2px 6px;
      background-color: #7565b5;
      color: #fff;
      border-radius: 2px;
      font-size: 14px;
      cursor: pointer;

      &:hover {
        background-color: #54468b;
      }
    }
  }
}

.add-cart {
  border: none;
  height: 32px;
  line-height: 32px;
  background-color: #eba613;
  padding: 0 20px;
  color: #fff;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.other-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  // background-color: #f2f2f2;
  height: 40px;

  line-height: 40px;
  padding: 0 10px;
  border-radius: 2px;

  .name {
    flex: 1;
    margin-left: 20px;
  }

  &:hover {
    color: #eba613;
    cursor: pointer;
  }

}

.b-item {
  .btns {
    margin-left: auto;

    a {
      display: inline-block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 3px;
      font-size: 12px;
      background-color: #bd5145;
      color: #fff;
    }
  }
}
</style>
